<!--2018/12/22 20:10. by soft-->
<#assign title='评定事务管理'>
<#include '../header.ftl'>
<style>
  .layui-btn + .layui-btn {
    margin-left: 2px;
  }
  .layui-col-xs6 {
    padding: 5px;
  }
</style>
<#--事件添加弹框-->
<div id="ac-box" style="display: none; padding: 15px 25px 0 0;">
  <form class="layui-form" lay-filter="incident-form">
    <input id="id" type="hidden" name="id">
    <div class="layui-form-item">
      <label class="layui-form-label">事务名</label>
      <div class="layui-input-block">
        <input id="name" name="name" lay-verType="tips" lay-verify="required"
               placeholder="请输入评定事务名" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">起止时间</label>
      <div class="layui-input-block">
        <div class="layui-col-xs6">
          <input id="beginTime" name="beginTime" lay-verType="tips" lay-verify="required" class="layui-input">
        </div>
        <div class="layui-col-xs6">
          <input id="endTime" name="endTime" lay-verType="tips" lay-verify="required" class="layui-input">
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">有效区间</label>
      <div class="layui-input-block">
        <div class="layui-col-xs6">
          <input id="beginRange" name="beginRange" lay-verType="tips" lay-verify="required" class="layui-input">
        </div>
        <div class="layui-col-xs6">
          <input id="endRange" name="endRange" lay-verType="tips" lay-verify="required" class="layui-input">
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block" style="text-align: right;">
        <button id="edit" class="layui-btn layui-btn-sm layui-btn-warm layui-hide" lay-submit lay-filter="edit_">修 改
        </button>
        <button id="add" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="add_">确定添加</button>
      </div>
    </div>
  </form>
</div>

<div class="incident-box">
  <div class="layui-card">
    <div class="layui-card-header">
      <div class="text-right">
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="methods.add();">添加</button>
      </div>
    </div>
    <div class="layui-card-body">
      <table id="incident-table"></table>

      <script type="text/html" id="incident-tool">
        {{# if(d.status != 1) { }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="begin">开始</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="stop">停止</a>
        {{# } }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs layui-bg-cyan" target="_top" href="${root}/excel/export/{{d.id}}">
          <i class="layui-icon-download-circle layui-icon"></i>统计表
        </a>
      </script>
    </div>
  </div>

  <script>
    var methods;
    layui.use(['table', 'layer', 'laydate', 'jquery', 'form'], function () {
      var boxIndex;
      var $ = layui.$;
      var form = layui.form;
      var table = layui.table;
      var layer = layui.layer;
      var laydate = layui.laydate;

      var $id = $('#id'), $name = $('#name'),
          $beginTime = $('#beginTime'), $endTime = $('#endTime'),
          $beginRange = $('#beginRange'), $endRange = $('#endRange'),
          $edit = $('#edit'), $add = $('#add');

      table.render({
        elem: '#incident-table',
        url: '${root}/incident/page',
        method: 'post',
        page: true,
        cols: [[
          {title: '序号', type: 'numbers'},
          {field: 'name', title: '项目'},
          {title: '状态', templet: '<span>{{getStatus(d.status)}}</span>', width: 80},
          {title: '参与人数', templet: '<i><span class="layui-badge layui-bg-cyan">{{d.peopleNum}}</span></i>', width: 100},
          {title: '起止时间', templet: '<i><b class="layui-badge layui-bg-green">{{d.beginTime}}</b> - ' +
            '<b class="layui-badge layui-bg-red">{{d.endTime}}</b></i>'},
          {title: '有效区间', templet: '<i><b class="layui-badge layui-bg-blue">{{d.beginRange}}</b> - ' +
            '<b class="layui-badge layui-bg-orange">{{d.endRange}}</b></i>'},
          {title: '操作', toolbar: '#incident-tool'}
        ]],
        parseData: function (res) {
          return {
            code: 0,
            msg: res.message,
            count: (res.payload ? res.payload.totalElements : 0),
            data: (res.payload ? res.payload.content : 0)
          }
        }
      });

      methods = {
        add: function () {
          switchType(true);
        },
        del: function (inc) {
          layer.confirm('确定删除事务<span style="color: #d25135;">[' + inc.name + ']</span>吗？', {
            title: '提示',
            icon: 3
          }, function (i) {
            $.post('${root}/incident/delete/' + inc.id, function (data) {
              if (data.status === 200) {
                table.reload('incident-table');
                layer.msg('删除成功！', {icon: 6, time: 1200});
                setTimeout(function () {
                  layer.close(i);
                }, 1250);
              } else {
                layer.alert(data.message, {icon: 5});
              }
            })
          });
        },
        edit: function (inc) {
          switchType(false, inc);
        },
        begin: function (inc) {
          methods.setStatus(inc.id);
        },
        stop: function (inc) {
          methods.setStatus(inc.id, true);
        },
        setStatus: function (id, stop) {
          var sm = '已开始';
          var url = '${root}/incident/restart/' + id;
          if (stop) {
            sm = '已停止';
            url = '${root}/incident/stop/' + id;
          }
          $.post(url, function (data) {
            if (data.status === 200) {
              layer.msg(sm, {time: 1000});
              table.reload('incident-table');
            } else {
              layer.alert(data.message, {
                title: '错误提示', icon: 2
              });
            }
          });
        }
      };

      table.on('tool', function (o) {
        var mtd = methods[o.event];
        if (mtd != null) {
          mtd(o.data);
        }
      });

      form.on('submit(add_)', function (obj) {
        var fd = obj.field;
        $.post('${root}/incident/add', fd, function (data) {
          if (data.status === 200) {
            layer.msg('添加成功！', {icon: 6, time: 1200});
            table.reload('incident-table');
            layer.close(boxIndex);
          } else {
            layer.alert(data.message, {icon: 2, title: '错误'});
          }
        });
        return false;
      });

      form.on('submit(edit_)', function (obj) {
        var fd = obj.field;
        $.post('${root}/incident/change', fd, function (data) {
          if (data.status === 200) {
            layer.msg('修改成功！', {icon: 6, time: 1200});
            table.reload('incident-table');
            layer.close(boxIndex);
          } else {
            layer.alert(data.message, {icon: 2, title: '错误'});
          }
        });
        return false;
      });

      laydate.render({
        elem: '#beginTime', //指定元素
        value: new Date(),
        theme: '#3e8084'
      });
      laydate.render({
        elem: '#endTime', //指定元素
        value: new Date(),
        theme: '#ab5264'
      });
      laydate.render({
        elem: '#beginRange', //指定元素
        value: new Date(),
        theme: '#478454'
      });
      laydate.render({
        elem: '#endRange', //指定元素
        value: new Date(),
        theme: '#818733'
      });

      function switchType(isAdd, inc) {
        var title = '事务添加';
        if (isAdd) {
          $id.val('');
          $name.val('');
          $add.removeClass('layui-hide');
          $edit.addClass('layui-hide');
        } else {
          title = '事务编辑';
          $id.val(inc.id);
          $name.val(inc.name);
          $beginTime.val(inc.beginTime);
          $beginRange.val(inc.beginRange);
          $endRange.val(inc.endRange);
          $endTime.val(inc.endTime);
          $add.addClass('layui-hide');
          $edit.removeClass('layui-hide');
        }
        boxIndex = layer.open({
          type: 1,
          title: title,
          offset: '120px',
          area: ['400px'],
          move: false,
          content: $('#ac-box')
        });
      }
    });

    function getStatus(status) {
      if (status === '0') {
        return '<span class="layui-badge layui-bg-orange">未开始</span>'
      } else if (status === '1') {
        return '<span class="layui-badge layui-bg-green">进行中</span>'
      } else {
        return '<span class="layui-badge layui-bg-red">已结束</span>'
      }
    }
  </script>
</div>

<#include '../footer.ftl'>